<template>
  <div class="demo-content">
    <h1>组合图元类型</h1>
    <section class="demo-text">
      <el-button @click="group">组合</el-button>
      <el-button @click="toActiveSelection">解除组合</el-button>
      <el-button @click="closeDIAN">断开</el-button>
      <canvas id="canvas" width="1200" height="600" ref="canvas"></canvas>
      <h2>说明</h2>
      <p>按住 <span class="annotation">shift</span>可多选图元</p>
      <p style="text-align:right;padding-right:60px">@王睿杰 2019.1.23</p>
    </section>
  </div>
</template>
<script>
import {fabric} from  "@/js/fabric";
export default {
  data() {
    return {
      canvas: null,
      tes:null,
      datalist: {
        d: [
          {
            id: "10",
            name: "test",
            type: "Circle",
            left: 200,
            top: 100,
            strokeWidth: 5,
            radius: 12,
            fill: "#fff",
            stroke: "#666"
          }
        ]
      }
    };
  },
  methods: {
    closeDIAN(){
      if(this.tes){
        this.tes.close();
        this.canvas.renderAll();
      }
      console.log(this.tes)

    },
    group() {
      let _this = this;
      window.kkk=_this.canvas
      console.log(_this.canvas);
        if (_this.canvas.getActiveObject() == null) {
        return false;
      }
      _this.canvas.getActiveObject() &&
      _this.canvas.getActiveObject().type == "activeSelection"
        ? _this.canvas.getActiveObject().toGroup()
        : _this.$notify({
            title: "提示",
            message:
              _this.canvas.getActiveObject().type + "是无法组合的元素类型",
            duration: 2000,
            position: "top-left"
          });
    },
    toActiveSelection() {
      let _this = this;
      if (_this.canvas.getActiveObject() == null) {
        return false;
      }
      // console.log(_this.canvas.getActiveObject().toActiveSelection())
      _this.canvas.getActiveObject() &&
      _this.canvas.getActiveObject().type == "group"
        ? _this.canvas.getActiveObject().toActiveSelection()
        : _this.$notify({
            title: "提示",
            message:
              _this.canvas.getActiveObject().type + "是无法拆分组合的元素类型",
            duration: 2000,
            position: "top-left"
          });
    }
  },
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      var canvas = (this.canvas = new fabric.Canvas("canvas"));
      // create a rectangle object
      var rect = new fabric.Rect({
        left: 100,
        top: 50,
        fill: "#D81B60",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true
      });
      var circle= new fabric.Circle({
        radius:100,
        left:100,
        top:100,
        label:"test",
        fill:"rgba(0,0,0,0)",
        stroke:"red",
        border:"red"
      })

      //  test.perPixelTargetFind = true;
      // test.hasControls = test.hasBorders = false;
      console.log("getRadiusY",circle.getRadiusY());
      circle.setRadius(50)
      // canvas.add(rect);
      // canvas.setActiveObject(rect,"activeSelection")
      // create a rectangle object
      var rect2 = new fabric.Rect({
        left: 200,
        top: 50,
        fill: "#F06292",
        width: 100,
        height: 100,
        strokeWidth: 2,
        stroke: "#880E4F",
        rx: 10,
        ry: 10,
        angle: 45,
        hasControls: true
      });

      // canvas.add(rect2);
      var circle1 = new fabric.Circle({
        radius: 65,
        fill: "#039BE5",
        left: 0
      });

      var circle2 = new fabric.Circle({
        radius: 65,
        fill: "#4FC3F7",
        left: 110,
        opacity: 0.7
      });

      var group = new fabric.Group([circle1, circle2], {
        left: 40,
        top: 250
      });
      // canvas.add(group);
      canvas.on("selection:created", function(e) {
        console.log(e);
        // console.log()
      });
var LabeledRect = fabric.util.createClass(fabric.Rect, {
	    type: 'labeledRect',
	    initialize: function(options) {
		    options || (options = { });
		    this.callSuper('initialize', options);
		    this.set('label', options.label || '');
		    this.set('labelFont', options.labelFont || '');
		    this.set('labelFill', options.labelFill || '');
	    },
	    toObject: function() {
		    return fabric.util.object.extend(this.callSuper('toObject'), {
			    label: this.get('label'),
			    labelFont: this.get('labelFont'),
			    labelFill: this.get('labelFill')
		    });
	    },
	    _render: function(ctx) {
		    this.callSuper('_render', ctx);
		    // ctx.font = '20px Helvetica';
		    // ctx.fillStyle = '#333';
		    console.log('this', this);
		    ctx.font = this.labelFont;
		    ctx.fillStyle = this.labelFill;
		    // ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
		    ctx.fillText(this.label, 0, 0+10);
	    }
    });
 
    var labeledRect = new LabeledRect({
	    width: 100,
	    height: 40,
	    left: 100,
	    top: 100,
	    label: 'test',
	    fill: '#faa',
        labelFont: '30px Helvetica',
        labelFill: '#00ff00'
    });
    // canvas.add(labeledRect);
    // setTimeout(function(){
	  //   labeledRect.set({
		//     label: 'trololo',
		//     fill: '#aaf',
		//     rx: 10,
		//     ry: 10,
    //         labelFill: '#0000ff'
	  //   });
	  //   canvas.renderAll();
    // }, 3000)
  // var canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;

  var padding = 0;

  fabric.Image.fromURL('/static/imags/scal.png', function(img) {
 
 
 img.set({ left: 200, top: 400}).scale(0.2);
  // canvas.backgroundImage = img;
   canvas.add(img);
  canvas.setActiveObject(img);
  canvas.renderAll();
  	img.lockScalingFlip = true
    // img.scaleToWidth(100);
    // var patternSourceCanvas = new fabric.StaticCanvas();
    // patternSourceCanvas.add(img);
    // patternSourceCanvas.renderAll();
    // var pattern = new fabric.Pattern({
    //   source: function() {
    //     patternSourceCanvas.setDimensions({
    //       width: img.getScaledWidth() + padding,
    //       height: img.getScaledHeight() + padding
    //     });
    //     patternSourceCanvas.renderAll();
    //     return patternSourceCanvas.getElement();
    //   },
    //   repeat: 'repeat'
    // });

    // canvas.add(new fabric.Polygon([
    //   {x: 185, y: 0},
    //   {x: 250, y: 100},
    //   {x: 385, y: 170},
    //   {x: 0, y: 245} ], {
    //     left: 0,
    //     top: 200,
    //     angle: -30,
    //     fill: pattern,
    //     objectCaching: false
    //   }));


  });
    });


  }
};
</script>

